<template>
	<s-layout title="推广审核" :statusBarColor="'#F6F6F6'" :bgStyle="{
		color:'#F6F6F6'
	}" color='#333333' :opacityBgUi="'bg-record'">
		<view class="examine-list">
			<view class="examine-item ss-p-20 ss-m-b-10" v-for="(item,index) in state.list" :key="index">
				<view class="ss-flex justify-between align-center">
					<view class="title">审核状态</view>
					<view class="status">
						<text v-if="item.status === 0" style="color:#DFAC5B;">待审核</text>
						<text v-if="item.status === 1" style="color:#8FC06E;">审核通过</text>
						<text v-if="item.status === 2" style="color:#FF9999;">审核驳回</text>
					</view>
				</view>
				<view class="ss-flex justify-between align-start ss-m-t-12">
					<view class="title">上传截图</view>
					<image class="screenshot" :src="item.image" mode="aspectFill" @click="preview(item.image)"></image>
				</view>
				<view class="ss-flex justify-between align-center ss-m-t-25">
					<view class="title">申请时间</view>
					<view class="title">{{item.create_time}}</view>
				</view>
				<view class="ss-flex justify-between align-center ss-m-t-25" v-if="item.status === 1">
					<view class="title">奖励类型</view>
					<view class="title">
						<text v-if="item.type === 'image'">图文奖励(10分)</text>
						<text v-if="item.type === 'video'">视频奖励(20分)</text>
						<text v-if="item.type === 'extend'">推广奖励(50分)</text>
					</view>
				</view>
				<view class="ss-flex justify-between align-center ss-m-t-25" v-if="item.status === 2">
					<view class="title">驳回理由</view>
					<view class="title">{{item.reason}}</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据"></s-empty>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';


	const state = reactive({
		page: 1,
		list: [],
		total: 1,
		loadStatus: ''
	})

	onLoad(() => {
		getData()
	})

	onReachBottom(() => {
		loadmore()
	})

	const preview = (image) => {
		uni.previewImage({
			urls: [image],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success(data) {
					
				},
				fail(err) {
					
				}
			}
		});
	}

	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getData()
		}
	}

	const getData = async () => {
		state.loadStatus = 'loading'
		const {
			error,
			data
		} = await sheep.$api.point.extendList({
			page: state.page,
			list_rows: 10
		})

		if (error === 0) {
			state.total = data.total
			state.list = state.list.concat(data.data)
			if (state.list.length === 0) {
				state.loadStatus = 'noMore';
			}
			if (data.current_page < data.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.examine-item {
		width: 100%;
		background: #FFFFFF;

		.title {
			font-family: PingFang SC;
			font-size: 24rpx;
			color: #C6C6C6;
		}

		.status {
			font-family: PingFang SC;
			font-size: 24rpx;
		}

		.screenshot {
			width: 64rpx;
			height: 112rpx;
		}
	}
</style>